import React, { Component } from 'react';
import { Modal, Form, message, Select, Input, DatePicker, Transfer, Row, Col } from 'antd';

const FormItem = Form.Item;
const { Option, OptGroup } = Select;
const Status = ['离线', '在线'];
const BindStatus = ['未绑定', '已绑定'];
export default class Publish extends Component {
  state = {
    value: 1,
    targetKeys: [],
    selectedKeys: [],
    dataSource: [],
    selectState: [],
  };
  componentDidUpdate(prevProps) {
    // Typical usage (don't forget to compare props):
    if (this.props.devList !== prevProps.devList) {
      const dataSource = this.props.devList
        .map(item => {
          return {
            key: item.devId,
            title: item.devId,
            onOffline: item.onOffline,
            desp: `${item.devId}-${Status[item.onOffline]}-${BindStatus[item.bindFlag]}`,
            bindFlag: item.bindFlag,
          };
        })
        .sort((x, y) => {
          return x.title.localeCompare(y.title);
        });
      this.setState({ dataSource });
    }
  }
  handleChange = (nextTargetKeys, direction, moveKeys) => {
    this.setState({ targetKeys: nextTargetKeys });

    // console.log('targetKeys: ', this.state.targetKeys);
    // console.log('direction: ', direction);
    // console.log('moveKeys: ', moveKeys);
  };

  handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    this.setState({ selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });

    // console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    // console.log('targetSelectedKeys: ', targetSelectedKeys);
  };

  handleScroll = (direction, e) => {
    // console.log('direction:', direction);
    // console.log('target:', e.target);
  };

  submit = () => {
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const { targetKeys } = this.state;
        const { record } = this.props;
        if (targetKeys.length === 0) {
          message.error('请选择素材发布的设备');
        } else {
          console.log('Received values of form: ', targetKeys, record);
          // const progSize = `${values.width}*${values.height}`;
          const targetArray = targetKeys.join(',');
          this.props.dispatch({
            type: 'program/publish',
            payload: { devIds: targetArray, progId: record.progId },
            callback: () => {
              message.success('调用节目发布任务成功，详细进度请查看任务中心.');
              this.props.handleColse(false);
              if (record.progType === '插播') {
                this.props.history.push(`/devlog/cutinlog/${record.progName}`);
              } else {
                this.props.history.push(`/devlog/tasklist/${record.progId}`);
              }

            },
          });
        }
      }
    });
  };
  handlefilter = value => {
    this.setState({ selectState: value });
    let dataSource = this.props.devList
      .map(item => {
        return {
          key: item.devId,
          title: item.devId,
          onOffline: item.onOffline,
          desp: `${item.devId}-${Status[item.onOffline]}-${BindStatus[item.bindFlag]}`,
          bindFlag: item.bindFlag,
        };
      })
      .sort((x, y) => {
        return x.title.localeCompare(y.title);
      });
    if (value.includes('online')) {
      dataSource = dataSource.filter(item => item.onOffline === 1);
    }
    if (value.includes('offline')) {
      dataSource = dataSource.filter(item => item.onOffline === 0);
    }
    if (value.includes('bind')) {
      dataSource = dataSource.filter(item => item.bindFlag === 1);
    }
    if (value.includes('unbind')) {
      dataSource = dataSource.filter(item => item.bindFlag === 0);
    }

    this.setState({ dataSource });
  };

  filterOption = (inputValue, option) => {
    // console.log('option', option);
    return option.desp.indexOf(inputValue) > -1;
  };
  renderItem = item => {
    // console.log('item', item);
    let customLabel = (
      <span style={{ font: ' bold 1.1em/1.5em serif', color: 'blue' }}>
        {item.title}-{Status[item.onOffline]}-{BindStatus[item.bindFlag]}
      </span>
    );

    if (item.onOffline === 0) {
      customLabel = (
        <span style={{ color: 'black' }}>
          {item.title}-{Status[item.onOffline]}-{BindStatus[item.bindFlag]}
        </span>
      );
    }
    return {
      label: customLabel,
      value: item.title,
    };
  };

  render() {
    const { modalVisible, form, handleColse, devList, record } = this.props;

    return (
      <Modal
        title="发布节目"
        width={900}
        style={{ height: 1000 }}
        visible={modalVisible}
        onOk={this.submit}
        onCancel={handleColse}
      >
        <Form>
          <FormItem label="节目名称" labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
            {record.progName}
          </FormItem>
          {/* <FormItem label="type" labelCol={{ span: 5 }} wrapperCol={{ span: 12 }}>
            <Select
              defaultValue={this.state.type}
              placeholder="Select adver type"
              onChange={this.handleSelectChange}
            >
              <Option value="breaking">breaking</Option>
              <Option value="program">program</Option>
            </Select>
          </FormItem>
          <FormItem labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} label="date">
            <DatePicker onChange={this.handletime} showTime format="YYYY-MM-DD HH:mm:ss" />
          </FormItem> */}
          <FormItem label="尺寸" labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
            {record.progSize}
          </FormItem>
          <FormItem label="设备状态" labelCol={{ span: 5 }} wrapperCol={{ span: 19 }}>
            <Select
              mode="multiple"
              placeholder="默认全选"
              style={{ width: 400 }}
              onChange={this.handlefilter}
            >
              <Option value="online" disabled={this.state.selectState.includes('offline')}>
                在线
              </Option>
              <Option value="offline" disabled={this.state.selectState.includes('online')}>
                离线
              </Option>
              <Option value="bind" disabled={this.state.selectState.includes('unbind')}>
                已绑定
              </Option>
              <Option value="unbind" disabled={this.state.selectState.includes('bind')}>
                未绑定
              </Option>
            </Select>
          </FormItem>

          <Row>
            <Col span={5} style={{ textAlign: 'right' }}>
              <span>设备列表：</span>
            </Col>
            <Col span={19}>
              <Transfer
                dataSource={this.state.dataSource}
                listStyle={{
                  width: 300,
                  height: 600,
                }}
                key="devId"
                showSearch
                titles={['设备列表', '已选择设备']}
                targetKeys={this.state.targetKeys}
                selectedKeys={this.state.selectedKeys}
                onChange={this.handleChange}
                onSelectChange={this.handleSelectChange}
                onScroll={this.handleScroll}
                render={this.renderItem}
                filterOption={this.filterOption}
              />
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}
